<template>
	<div class="c-delete" @click="del" @mouseenter="show = false" @mouseleave="show = true">
		<transition name="el-fade-in-linear" mode="out-in">
			<span key="1" v-if="show" style="color:#4DB7F3;"> 修改 </span>
			<span key="2" v-else>
				<icon-svg class="z" name="modify_btn"></icon-svg>
			</span>
		</transition>
	</div>
</template>
<script>
export default {
	data() {
		return {
			show: true
		};
	},
	methods: {
		del() {
			this.$emit('edit');
		}
	}
};
</script>
<style lang="scss" scoped>
.c-delete {
	cursor: pointer;
	display: inline-block;
	width: 25px;
	margin-left: 10px;
	text-align: center;
	:hover {
		opacity: 0.7;
	}
	.z {
		font-size: 18px;
	}
}
</style>
